<template>
    <el-button type="primary" @click="addClue">录入线索</el-button>
    <el-button type="success" @click="importClue">导入线索(Excel)</el-button>
    <el-button type="danger" @click="batchDel">批量删除</el-button>
    <el-table :data="cluePageInfo.list" style="width: 100%" @selection-change="selectId">
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" label="序号" width="65" />
        <el-table-column property="ownerDO.name" label="负责人" width="120" />
        <el-table-column property="activityDO.name" label="所属活动" />
        <el-table-column label="姓名">
            <template #default="scope">
                <a href="javascript:void(0)" @click="view(scope.row.id)">{{ scope.row.fullName }}</a>
            </template>
        </el-table-column>
        <el-table-column property="appellationDO.typeValue" label="称呼" width="120" />
        <el-table-column property="phone" label="手机" width="120" />
        <el-table-column property="weixin" label="微信" width="120" />
        <el-table-column property="intentionStateDO.typeValue" label="意向状态" />
        <el-table-column property="intentionProductDO.name" label="意向产品" />
        <el-table-column property="stateDO.typeValue" label="线索状态" />
        <el-table-column property="sourceDO.typeValue" label="线索来源" />
        <el-table-column property="nextContactTime" label="下次联系时间" width="165" />
        <el-table-column label="操作" width="230">
            <template #default="scope">
                <el-button type="primary" @click="view(scope.row.id)">详情
                </el-button>
                <el-button type="success" @click="edit(scope.row.id)">编辑
                </el-button>
                <el-button type="danger" @click="del(scope.row.id)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background layout="prev,pager, next, jumper, total" :total="cluePageInfo.total"
        :page-size="cluePageInfo.pageSize" @change="toPage" />

    <!-- 导入线索弹窗 -->
    <el-dialog title="导入线索(Excel)" v-model="clueDialogVisible">
        <el-upload ref="uploadRef" action="http://localhost:8088/api/importExcel" method="post" name="excelFile" :headers="header"
            :on-success="uploadSuccess" limit="1" :auto-upload="false">
            <template #trigger>
                <el-button type="primary">
                    请选择Excel文件
                </el-button>
                &nbsp;请选择要导入的Excel文件
            </template>

        </el-upload>
        <div>
            重要提示：
            <ul>
                <li>上传仅支持后缀名为.xls或.xlsx的文件；</li>
                <li>给定Excel文件的第一行将视为字段名；</li>
                <li>请确认您的文件大小不超过50MB；</li>
                <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式；</li>
                <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式；</li>
            </ul>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="clueDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="importExcel">导 入</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { inject, onMounted, ref } from 'vue'
import { doGet } from '@/http/httpRequest'
import { TOKEN_NAME } from '@/util/constant'
import { showMessage } from "../util/message";
import { useRouter, useRoute } from 'vue-router';

let cluePageInfo = ref([])

let clueDialogVisible = ref(false)

let flushPage = inject('flush');

let router = useRouter()

onMounted(() => {
    loadClueList(1);
})

//加载列表
const loadClueList = (current) => {
    doGet('/api/clue', { current: current }).then(resp => {
        if (resp) {
            if (resp.data.code === 200) {
                cluePageInfo.value = resp.data.info;
            } else {
                showMessage('数据加载失败', 'error');
            }
        }
    })
}

//分页
const toPage = (currentPage, pageSize) => {
    loadClueList(currentPage);
}

//导入线索Excel
const importClue = () => {
    clueDialogVisible.value = true;
}

//定义上传组件的ref对象
const uploadRef = ref();

//导入excel上传
const importExcel = () => {
    uploadRef.value.submit();
}

//上传文件时添加token
let header = ref({
    Authorization: window.sessionStorage.getItem(TOKEN_NAME)
})

const uploadSuccess = (response, uploadFile, uploadFiles) => {
    if (response) {
        if (response.code === 200) {
            showMessage('导入成功', 'success')
            //页面刷新
            flushPage();
        } else {
            showMessage('导入失败', 'error')
        }
    }
}

//路由跳转详情页
const view = (id) => {
    router.push('/dashboard/clue/'+id)
}


</script>

<style scoped></style>